<template>
  <div class="container" >
      <!-- HeaderView 子组件-->
    <HeaderView/><br/>
    -----------------------------
    <br/>

  <h2>各种插槽</h2>

<!-- 由于HTML中的属性是不区分大小写的，所以当使用DOM中的模板（HTML中）时，驼峰写法需要转化为短横线写法 -->

<Cha-cao>

<!-- 默认插槽 -->
  <!-- <h2> 6868666666666666666666668888888888888</h2> -->

<!-- 具名插槽 tab切换-->
  <template v-slot:tab1>
    <div>
      我是一个男孩tab1 bbbbbbbbbbbbbbbbbbb
    </div>
  </template>

  <template v-slot:tab2>
    <div>
      我是一个女孩tab2y yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
    </div>
  </template>

<!-- 作用域插槽 子传父-->

    <template slot-scope="obj">
      <div>
        {{obj}} 
        <!--
        { "arr": [ { "user": "张三", "school": "二小", "age": 12 }, { "user": "李四", "school": "一中", "age": 15 } ] }
         -->
        <table border="1" style="text-align:center">
          <thead>
            <tr>
              <th>姓名</th>
              <th>学校</th>
              <th>年龄</th>
            </tr>
          </thead>

          <tbody>
              <tr 
              v-for="(item,index) in obj.arr" 
              :key="index" v-colors="index"
               :class="index%2==0?'skyblue':'pink'"
              >
                 <td>{{item.user}}</td>
                  <td>{{item.school}}</td>
                  <td>{{item.age}}</td>
              </tr>
          </tbody>
        </table>
      </div>

    </template>

  </Cha-cao>

  ----------------------------<br/><br/>

  
  </div>
</template>

<script>

// 局部组件，HeaderViews=>自定义（多单词,无意义）
 import HeaderViews from '../components/HeaderView.vue'
 import ChaCao from '../components/tables/ChaCao.vue'


export default {
  data() {
    return {
      
    }
  },
  methods:{
   
  },
  directives: {
        /* 局部引入 自定义指令，隔行换色 */
      colors(obj,index){
          // console.log(obj,index) //obj=>标签 index=>value是索引
          if(index.value%2==0){
              obj.style.color="green"
          }else{
              obj.style.color="blue"
          }
      }
 },
  /* 放私有组件的地方 */
  components: {
    //注册组件标签
    // HeaderView=>组件标签,HeaderViews=>自定义（多单词,无意义）
   HeaderView:HeaderViews,
   ChaCao,
  }
}
</script>

<style scoped>
table tr th,table tr td{
  width: 200px;
  height: 40px;
}
.skyblue{
  background-color: skyblue;
}
.pink{
  background-color: pink;
}
</style>
